<template>
  <div class="api-info">

    <el-row>
      <el-col :span="5">
        <apiGroup @getApiFormInfo="getApi"></apiGroup>
      </el-col>

      <el-col :span="19">
        <div class="api-content">
          <el-tabs v-model="activeName" @tab-click="handleClick">

            <el-tab-pane label="预览" name="first">
              <apiInfo ref="apiInfo"></apiInfo>
            </el-tab-pane>

            <el-tab-pane label="编辑" name="second">
              <apiEdit></apiEdit>
            </el-tab-pane>

            <el-tab-pane label="调试" name="third">
              <apiDebug></apiDebug>
            </el-tab-pane>

            <el-tab-pane label="Mock" name="fourth">mock</el-tab-pane>
          </el-tabs>

        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import apiGroup from '../apiGroup/group.vue'
import apiInfo from './apiOperation/apiInfo.vue'
import apiEdit from "./apiOperation/apiEdit.vue"
import apiDebug from './apiOperation/apiDebug.vue'
export default {
  data () {
    return {
      activeName: 'first',
      groupList: [],

    }
  },
  methods: {
    handleClick () { },

    //获取分组
    getGroup () {
      this.data = []
      this.$http({
        url: this.$http.adornUrl('/aitesting/group/listByProjectId'),
        method: 'get',
        params: {
          projectId: this.$store.state.api.projectId,
          groupType: 0,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.groupList = data.list
          this.$store.commit("api/updateGroupList", this.groupList)
          console.log("保存groupList")
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },

    //获取接口
    getApi (apiId) {
      this.$refs.apiInfo.getApi(apiId)
    }
  },

  mounted () {
    this.getGroup()

  },

  components: {
    apiGroup,
    apiInfo,
    apiEdit,
    apiDebug
  }
}
</script>

<style scoped>
.api-content {
  margin-left: 5px;
}
</style>